<template>
  <div id="register">
    <div id="loginInput">
    <img width="100%" height="100%"  class="bg_img" src="/../../static/img/adminLogin.jpg">
      <div class="input">
        <div style="text-align:center;padding-top:10px">
          <router-link to="/">
            <svg class="login_logo" aria-hidden="true">
              <use xlink:href="#icon-icon_xiangji"></use>
            </svg>
          </router-link>
        </div>
        <div class="admin_name">
          <Input
            v-model="name"
            prefix="ios-contact"
            size="large"
            placeholder="Enter name"
            clearable
          />
        </div>
        <div class="admin_ages">
          <Input
            v-model="ages"
            prefix="ios-contact"
            size="large"
            placeholder="Enter age"
            clearable
          />
        </div>
        <div class="admin_pass">
          <Input
            clearable
            prefix="ios-lock"
            size="large"
            type="password"
            placeholder="Enter password"
            v-model="password"
          />
        </div>
        <div class="admin_pass">
          <Input
            clearable
            prefix="ios-lock"
            size="large"
            type="password"
            placeholder="Enter the password again"
            v-model="oncePassword"
          />
        </div>
      </div>
      <Button type="info" class="admin_login" size="large" @click="handerRegister">注册</Button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Register",
  data() {
    return {
      name: "",
      ages: null,
      password: "",
      oncePassword: ""
    };
  },
  methods: {
    handerRegister() {
      if (this.password == this.oncePassword) {
        let usersjson = {
          username: this.name,
          age: this.ages,
          password: this.password
        };
        axios.post("api/UpdateUsers", usersjson).then(res => {
          alert("注册成功");
          this.$router.push('/Login')
        });
      } else {
        alert("密码不一致")
      }
    }
  },
  mounted() {}
};
</script>

<style scoped>
.bg_img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
#register {
  display: flex;
  align-items: center;
  justify-content: center;
}
.registerWrap {
  text-align: center;
}
.registerWrap div {
  width: 50vw;
  height: 50vh;
}
#loginInput {
  width: 25vw;
  background-color: rgb(248, 248, 249);
}
.input {
  width: 18vw;
  margin: 0 auto;
}
.admin_login {
  background-color: rgb(71, 203, 137);
  border-color: #fff;
  width: 100%;
  margin: 15px 0 30px 0;
}
.input div {
  margin: 10px auto;
}
p {
  line-height: 0px;
}
.login_logo {
  width: 50px;
  height: 55px;
}
</style>
